<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <style>
    div {
      max-height:180px;
      overflow: scroll;
      border:1px solid #ccc;
    }
    </style>
  </head>
  <body>
    <h1><%= title %></h1>
    <div>
      <p>Welcome to <%= title %></p>
    </div>
    <input type="text">
    <button onclick="addMsg()">添加信息</button>
    <button onclick="close1()">close</button>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
    $.get("/movie?name=xx", function(result){
   console.log(result);
  });

    $.post("/movie",{name:'xx',age:12},function(result){
   console.log(result);
  });
  
  

      let url='http://127.0.0.1:3000';
     let socket=io().connect(url);
      
        // 监听
        socket.on('connect',()=>{
          console.log('客户端建立连接');
          socket.emit('open')
        })

        // 接受返回消息
        socket.on('msg',(data)=>{
          console.log(data);
          add(data)
          // 设置滚动条底部
          document.querySelector('div').scrollTop=document.body.scrollHeight;
        })


        function add(data) {
          let el=document.createElement('p');
          el.innerText=data;
          document.querySelector('div').appendChild(el);
        }
        

        function addMsg() {
          // let bt=document.querySelector
          
          let val=document.querySelector('input').value;
          // 发送信息
          socket.emit('msg',val);

          // 显示到客户端页面
          add(val);
        }


        function close1() {
          socket.disconnect(true);
          // window.location.href='./';
        }
    </script>
  </body>
</html>
